<template>
  <div class="bars-box">
    <ul class="bars">
      <li
        v-for="(item, index) of dataList"
        :key="index"
      >
        <bar
          :settings="tempSettings"
          :title="item.title"
          :dataList="item.data"
        >
        </bar>
      </li>
    </ul>
  </div>
</template>

<script>
import Bar from '@/common/echarts/Bar'
export default {
  name: 'Bars',
  components: {
    Bar
  },
  data () {
    return {
      dataList:
      [
        {
          title: '5月份',
          data: [83, 98, 78, 58]
        },
        {
          title: '6月份',
          data: [68, 70, 70, 54]
        },
        {
          title: '7月份',
          data: [38, 62, 86, 46]
        },
        {
          title: '8月份',
          data: [61, 82, 76, 85]
        },
        {
          title: '9月份',
          data: [83, 98, 78, 58]
        },
        {
          title: '10月份',
          data: [68, 70, 70, 54]
        },
        {
          title: '11月份',
          data: [38, 62, 86, 46]
        },
        {
          title: '12月份',
          data: [61, 82, 76, 85]
        }
      ],
      tempSettings: {
        xData: ['最低出勤率', '最高出勤率', '月请假人数', '月缺勤人数'],
        data: [83, 98, 78, 58],
        linearGradient: ['#ffe98f', '#2dffff'],
        labelHide: true,
        xHide: true,
        yName: '人数（人）',
        color (params) {
          const colorList = ['#ffe98f', '#53e9ee', '#7193ff', '#315bff']
          return colorList[params.dataIndex]
        }
      }
    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="stylus" scoped>
.bars-box
  width: 100%
  .bars
    width: 100%
    li
      height: 160px
      width: 33.3%
      float: left
      margin-top: 10px
</style>
